import React, { useState, useEffect } from 'react'
import { Button, DatePicker, Message } from '@kedacom/react-next'
import { fetchGetMeetingDeadLine, fetchSaveMtDeadLine } from '@/api/sysConfig/basicConfig'
import { fetchStatus } from '@/api/global'
import { t } from 'i18next'
import dayjs from '@/plugins/dayjs'

function BasicConfig() {
	const [date, setDate] = useState<string>('')

	useEffect(() => {
		fetchGetMeetingDeadLine().then((data) => {
			data && setDate(data)
		})
	}, [])

	const handelSave = () => {
		fetchStatus(() => {
			fetchSaveMtDeadLine(date).then((res) => {
				if (res) {
					Message.info(t('保存成功'))
				} else {
					Message.info(t('保存失败'))
				}
			})
		})
	}

	return (
		<div className="basic-config">
			<span className="label">{t('例会可预订的终止日期')}</span>
			<DatePicker
				value={date}
				onChange={(newValue, formatString) => setDate(formatString)}
				minDate={dayjs()}
				maxDate={dayjs().add(1, 'year')}
				i18n={{
					confirm: t('确认'),
					year: t('年'),
					month: [
						t('1月'),
						t('2月'),
						t('3月'),
						t('4月'),
						t('5月'),
						t('6月'),
						t('7月'),
						t('8月'),
						t('9月'),
						t('10月'),
						t('11月'),
						t('12月'),
					],
					week: [t('日'), t('一'), t('二'), t('三'), t('四'), t('五'), t('六')],
				}}
			/>
			<Button className="save" onClick={handelSave}>
				{t('保存')}
			</Button>
		</div>
	)
}

export default BasicConfig
